<template>
  <div class="bg">
    <nav-com
      title="申请退货退款"
      :showView='true'
      @back="backHandler()"
    ></nav-com>
    <div style="background-color: white; margin: 10px 15px;border-radius: 10px;;line-height: 40px;">
      <div style="display:flex;border-bottom: 1px solid #DCDCDC;padding-left: 10px">
        退款金额<div style="color:red">*</div>
      </div>
      <div style="padding:10px">
        <div style="display:flex;justify-content: space-between;">
          <div style="color:#FE4B20;font-size: 18px;font-weight: bold;">￥{{returnForm.refund_fee}}</div>
          <div
            style="color:#808080;font-size:12px"
            @click="editMoney"
          >修改</div>
          <!-- <van-field v-model="returnForm.money" label="" placeholder="请输入退款金额" /> -->
        </div>
        <div style="color:#808080;font-size:12px;line-height: 20px;">可修改，最多￥{{returnForm.refund_fee}}，含发货邮费￥0.00</div>
      </div>
      <!-- <div style="padding:10px">
                <div style="display:flex;justify-content: space-between;">
                    <div style="color:#FE4B20;font-size: 18px;font-weight: bold;">{{returnForm.refund_fee}}</div>
                    <van-field v-model="returnForm.phone" label="" placeholder="请输入您的手机号" />
                </div>
            </div> -->
    </div>

    <div style="background-color: white; margin: 10px 15px;border-radius: 10px;;line-height: 40px;padding-bottom: 5px;">
      <div style="display:flex;border-bottom: 1px solid #DCDCDC;padding-left: 10px">
        补充描述和凭证<div style="color:red">*</div>
      </div>
      <div style="background-color: rgb(247, 247, 247);margin: 5px 10px; border-radius: 10px;">
        <div>
          <van-cell-group>
            <van-field
              v-model="returnForm.desc"
              type="textarea"
              placeholder="补充描述，有助于商家更好的处理售后问题"
              maxlength="200"
              show-word-limit
            />
          </van-cell-group>
        </div>
        <div style="padding:10px">
          <van-uploader
            v-model="fileList"
            max-count="3"
            upload-text="3张凭证"
            :after-read="afterRead"
          />
        </div>
      </div>
    </div>
    <van-radio-group v-model="radio" style="margin:5vw;line-height:10vw" @change='change'>
      <van-radio name="1" style="margin:5vw 0">退货退款</van-radio>
      <van-radio name="2" style="margin:5vw 0">退款</van-radio>
    </van-radio-group>
    <div
      @click="submit"
      style="color: #FFFFFF;margin:0 auto;text-align: center;width: 300px;line-height: 50px;background: #FE4B20;border-radius: 50px;margin-top: 50px;"
    >提交</div>
    <van-dialog v-model="show">
      <div style="padding:20px">
        <van-field
          v-model="returnForm.refund_fee"
          type="digit"
          placeholder="输入金额"
          confirmButtonColor="#FE4B20"
        />
      </div>
    </van-dialog>
  </div>

</template>
<script>
import {
  getOrders,
  getOrders2,
  putOrders,
  putselfWithdrawal,
  applyReturnGoods,
  orderAftersale,
  postImages2,
} from "@/api/api";
import navCom from "@/component/nav";
import { Field } from "vant";
import { Uploader } from "vant";
import { Dialog } from "vant";
import { Toast } from "vant";

export default {
  name: "orders",
  components: {
    navCom,
  },
  data() {
    return {
        radio:1,
      show: false,
      id: "",
      fileList: [],
      returnForm: {
        money: "",
        phone: "",
        desc: "",
        images: [],
      },
    };
  },
  filters: {
    /*
        时间格式自定义 只需把字符串里面的改成自己所需的格式
        */
    formatDateTime: function (date) {
      var date = new Date(date * 1000);
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var Hours = date.getHours();
      if (Hours >= 0 && Hours <= 9) {
        Hours = "0" + Hours;
      }
      var Minutes = date.getMinutes();
      if (Minutes >= 0 && Minutes <= 9) {
        Minutes = "0" + Minutes;
      }
      var Seconds = date.getSeconds();
      if (Seconds >= 0 && Seconds <= 9) {
        Seconds = "0" + Seconds;
      }
      var currentDate =
        date.getFullYear() +
        "-" +
        month +
        "-" +
        strDate +
        " " +
        Hours +
        ":" +
        Minutes +
        ":" +
        Seconds;
      return currentDate;
    },
  },

  mounted() {},
  methods: {
    change(val){
        this.radio = val
    },
    //返回
    backHandler() {
      this.$router.go(-1);
    },
    editMoney() {
      this.show = true;
    },
    //初始化
    init() {
      // this.getDataHanlder("range")
    },
    //获取数据
    submit() {
      console.log(this.returnForm);
      if(this.returnForm.images.length==0){
                this.$dialog.alert({
                        message:"请上传凭证"
                 })
                 return;
       }
      if (this.returnForm.desc == "") {
        this.$dialog.alert({
          message: "请填写描述",
        });
        return;
      }
      applyReturnGoods(this.returnForm).then((res) => {
        console.log("applyReturnGoods", res);
        // Toast(res.data.msg);
        if (res.data.code == 1) {
          Toast("申请成功！");
          setTimeout(() => {
            this.$router.go(-1);
          }, 1500);
        } else {
          this.$dialog.alert({
            message: res.data.msg,
          });
        }
      });
    },
    afterRead(file) {
      var that = this;
      console.log(file);
      file.status = "uploading";
      file.message = "上传中...";
      var data = new FormData();
      data.append("file", file.file);
      postImages2(data).then((res) => {
        if ((res.data.code = 1)) {
          file.status = "done";
          file.message = "";
          that.returnForm.images.push(res.data.data.fullurl);
        } else {
          file.status = "failed";
          file.message = "上传失败";
        }
        console.log(res);
      });
    },
  },
};
</script>
<style scoped>
.bg {
  height: 100vh;
  background-color: #f2f3f7;
}
.van-cell-group {
  background-color: #f7f7f7;
}
.van-cell {
  font-size: 10px !important;
  background-color: #f7f7f7;
  border: 0 solid #f7f7f7;
}
.van-cell ::after {
  border: 0 solid #f7f7f7;
}
.van-uploader__upload-text {
  /* margin-top: 8px; */
  color: #969799;
  font-size: 12px;
  line-height: 15px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
<style>
.van-uploader__upload {
  border: 1px solid #e0e0e0 !important;
}
.van-uploader__upload-text {
  margin-top: 0px !important;
}
</style>